<div id="menu">
	<ul>
		<li>
			<div class="menu_li"><a href="{php echo $this->createMobileUrl('messagesindex', array('id' => $rid))}"><img src="../addons/haoman_dpm/mfooter/coin.png" width="10" />&nbsp;发消息</a></div>
			<img class="line" src="../addons/haoman_dpm/mfooter/line.png" width="1">
			<!--<span>-->
				<!---->
			<!--</span>-->
		</li>
		<li>
			<div class="menu_li"><a href="{php echo $this->createMobileUrl('index', array('id' => $rid))}"><img src="../addons/haoman_dpm/mfooter/coin.png" width="10" />&nbsp;流程</a></div>
			<img class="line" src="../addons/haoman_dpm/mfooter/line.png" width="1" />
			<!--<span>-->
				<!---->
			<!--</span>-->
		</li>
		<li id="hd">
			<div class="menu_li"><img src="../addons/haoman_dpm/mfooter/coin.png" width="10" />&nbsp;互动</div>
			<img class="line" src="../addons/haoman_dpm/mfooter/line.png" width="1" />
			<span>

				<div style="border: 1px rgba(0,0,0,0.1) solid;border-radius: 6px;background: #fff;padding: 0 10px;">
                 {if $reply['isqhb']!=1}
				<a href="{php echo $this->createMobileUrl('qhbIndex', array('id' => $rid))}">抢红包</a>
                 {/if}
					{if $reply['istoupiao']==0}
				<a href="{php echo $this->createMobileUrl('go_toupiao', array('id' => $rid))}">投票</a>
                   {/if}
                {if $yyy['isyyy']==0}
				<a href="{php echo $this->createMobileUrl('yyyIndex', array('id' => $rid))}">摇一摇</a>
                {/if}
				{if ISCUSTOM == 1 && CUSTOM_VERSION == 'DS'}
                  {if $dsreply['is_openbbm']==1}
				<a href="{php echo $this->createMobileUrl('dsindex', array('id' => $rid))}">打赏</a>
                  {/if}
				{elseif ISCUSTOM == 1 && CUSTOM_VERSION == 'ZNL'}
                     {if $znlreply['isznl']==1}
				<a href="{php echo $this->createMobileUrl('znlindex', array('id' => $rid))}">攒能量</a>
                     {/if}
				{else}
				{/if}
				{if $reply['isjiabin']==0}
				<a href="{php echo $this->createMobileUrl('showjiabin', array('id' => $rid))}">嘉宾展示</a>
				{/if}
				</div>
			</span>
		</li>
		<li>
			<div class="menu_li"><a href="{php echo $this->createMobileUrl('mybobing', array('id' => $rid))}"><img src="../addons/haoman_dpm/mfooter/coin.png" width="10" />&nbsp;我的</a></div>
			<!--<span>-->
				<!---->
			<!--</span>-->
		</li>
	</ul>
</div>

<div class="footer_front"><img src="../addons/haoman_dpm/mfooter/front.png" width="100%" height="100%"></div>

<style type="text/css">
*{margin:0;padding:0;}
a,img{border:0;}
a{text-decoration:none;}
#menu{position:fixed;bottom:0px;width:100%;height:44px;line-height:44px;z-index:999;background-color: #fff;background:url(../addons/haoman_dpm/mfooter/menubg.png) repeat-x;}
#menu ul{margin:0 auto;list-style-type:none;width:100%;max-width:500px;height:100%;}
#menu ul li{float:left;width:25%;height:100%;text-align:center;position:relative;font-size:14px;}
#menu ul li .line{position:absolute;top:0px;right:0px;z-index:30;}
#menu ul li .menu_li{position:absolute;top:0px;left:0px;z-index:20;width:100%;height:100%;color:#454545;background:url(../addons/haoman_dpm/mfooter/menubg.png) repeat-x;}
#menu ul li .menu_li a{color:#454545;}
#menu ul li .img_front{position:absolute;top:0px;left:0px;z-index:30;width:100%;height:100%;}
#menu ul li .img_front img{width:100%;height:100%;}
#menu ul li span{display: block;position:absolute;bottom:0px;left:50%;width:104px;margin-left:-52px;margin-bottom:14px;height:auto;text-align:center;z-index:10;}
#menu ul li span div{position:absolute;top:0px;left:0px;}
#menu ul li span a{width:84px;height:44px;line-height:40px;color:#454545;text-decoration:none;background: #fff;display: block;border-bottom: 1px rgba(0,0,0,0.1) solid;}

.footer_front{position:fixed;width:100%;height:100%;top:0px;left:0px;z-index:888;display:none;}
</style>

<script type="text/javascript">
window.onload = function(){
	$('#menu ul li').each(function(j){
		$('#menu ul li').eq(j).removeClass("on");
		$('#menu ul li span').animate({bottom:-$('#menu ul li span').height()},100);
	});
}


	$("#hd").click(function(){

		if($(this).attr("class")!="on"){

			$('#menu ul .on span').animate({bottom:-$('#menu ul .on span').height()},200);
			$('#menu ul .on').removeClass("on");
			$(this).addClass("on");

			$('#menu ul li span').animate({bottom:$('#menu ul .on span div').height()+48},200);
			$('.footer_front').show();
		}else{
			$('#menu ul li span').animate({bottom:-$('#menu ul li span').height()},200);
			$(this).removeClass("on");
			$('.footer_front').hide();
		}
	});


$('.footer_front').click(function(){
	$('#menu ul .on span').animate({bottom:-$('#menu ul .on span').height()},200);
	$('#menu ul .on').removeClass("on");
	$(this).hide();
});
</script>